<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input
            v-model="search"
            placeholder="输入考试标题搜索"
            clearable
            @change="getTaskList">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getTaskList" class="el-icon-search" type="primary"></el-button>
      </el-form-item>
      <el-form-item>
        <template>
          <el-select v-model="to_class" clearable placeholder="按班级分类" @change="getTaskList">
            <el-option
                v-for="item in class_list"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </template>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 30px;"
        row-key="id"
        border
        stripe
        default-expand-all
        :tree-props="{children: 'studentOfTask', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="name"
          label="考试标题"
          width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.to_class">{{ (scope.row.name).slice(0, 10) }}...</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="class_name"
          label="班级"
          width="100">
      </el-table-column>
      <el-table-column
          prop="show_type"
          label="考试类型"
          width="95">
      </el-table-column>
      <el-table-column
          prop="student_name"
          label="考生姓名"
          width="100">
      </el-table-column>
      <el-table-column
          prop="status"
          label="考试状态"
          width="100">
        <template slot-scope="scope">
          <el-tag size="small" type="info" effect="dark" v-if="scope.row.status === 0">
            {{ scope.row.show_status }}
          </el-tag>
          <el-tag size="small" type="success" effect="dark" v-else-if="scope.row.status === 1">
            {{ scope.row.show_status }}
          </el-tag>
          <el-tag size="small" type="warning" effect="dark" v-else-if="scope.row.status === 2">
            {{ scope.row.show_status }}
          </el-tag>
          <el-tag size="small" type="danger" effect="dark" v-else-if="scope.row.status === 3">
            {{ scope.row.show_status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="show_duration"
          label="考试用时"
          width="85">
      </el-table-column>
      <el-table-column
          prop="sys_score"
          label="系统评分"
          width="80">
      </el-table-column>
      <el-table-column
          prop="hand_score"
          label="教师评分"
          width="80">
      </el-table-column>
      <el-table-column
          prop="final_score"
          label="最终成绩"
          width="80">
        <template slot-scope="scope">
          <span style="color: red; font-weight: bold">{{ scope.row.final_score }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="begin_time"
          label="考试开始时间"
          width="160">
      </el-table-column>
      <el-table-column
          prop="icon"
          label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="editTask(scope.row.id)" v-if="scope.row.name">编辑</el-button>
          <el-button size="mini" @click="checkPaper(scope.row.id)" v-else-if="scope.row.student_name">批改</el-button>
          <template v-if="scope.row.name && hasPermission()">
            <el-popconfirm title="确定删除?" @confirm="delHandle(scope.row.id)">
              <el-button size="mini" type="danger" slot="reference" style="margin-left: 10px;">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="current"
        :page-size="size"
        :total="total">
    </el-pagination>
    <div style="text-align: center; padding-bottom: 10px;">&COPY;copyleft@海饼干</div>
  </div>
</template>

<script>
export default {
  name: "Permission",
  data() {
    return {
      search: '',
      to_class: '',
      total: 0,
      size: 10,
      current: 1,
      class_list: [],
      tableData: [],
    }
  },
  mounted() {
    this.getTaskList()
    this.getClassList()
  },
  methods: {
    checkPaper(id) {
      this.$router.push(`/HandCheckPaper/?id=${id}`)
    },
    editTask(id) {
      this.$router.push(`/teacher/EditTask/?id=${id}`)
    },
    handleSizeChange(val) {
      this.size = val
      this.getTaskList()
    },
    handleCurrentChange(val) {
      this.current = val
      this.getTaskList()
    },
    getClassList() {
      this.$http({
        url: this.$settings.BASE_URL + '/user/student_class/',
        method: 'get',
      }).then(res => {
        this.class_list = res.data.result.results
      })
    },
    getTaskList() {
      this.$http({
        url: this.$settings.BASE_URL + '/paper/task_list/',
        method: 'get',
        params: {
          page: this.current,
          size: this.size,
          search: this.search,
          to_class: this.to_class,
        }
      }).then(res => {
        if (res.data.code === 20000) {
          this.tableData = res.data.result.results
          this.total = res.data.result.count
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 3000,
          })
        }
      })
    },
    delHandle(id) {
      this.$http({
        url: this.$settings.BASE_URL + '/paper/task_edit/del_task/',
        method: 'post',
        data: {task_id: id}
      }).then(res => {
        if (res.data.code === 20000) {
          this.$message({
            type: 'success',
            message: res.data.msg,
            duration: 3000,
          })
          this.getTaskList()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败',
            duration: 3000,
          })

        }
      })
    }
  }
}
</script>

<style scoped>

</style>
